<template>
    <span class="tags">
      {{value}}
      <i class="fa fa-times-circle" @click.stop="click" v-if="closable" style="color:#aaa"></i>
    </span>
</template>

<script>
    export default {
        name: "tag",
      props:{
          value:{
            required:true,
            type:String
          },
          closable:{
            type:Boolean,
            default(){
              return true
            }
          }
      },
      methods:{
        click(){
          this.$emit('click',this.value)
        }
      }
    }
</script>

<style>
  .tags{
    display: inline-block;
      border-radius: 4px;
      padding:4px 5px;
    font-size: 14px;
    color:#888888;
    white-space: nowrap;
    margin: 2px 5px 2px 6px;
    box-sizing: border-box;
    background-color: #f0f2f5;
    border-color: transparent;
  }
</style>
